/**
 * Created by madi on 3018/3/13.
 */
import React from 'react';
import PropTypes from 'prop-types';
import {connect} from 'dva';
import {Icon, Form, Button, Checkbox, Input} from 'antd';
import TweenOne from 'rc-tween-one';
import styles from '../../themes/indexof.less';
import MD5 from 'js-md5';
import {name} from '../../utils/config';

// 声明组件
const FormItem = Form.Item;
const LoginPage = ({
    login, dispatch, form: {
        getFieldDecorator,
        validateFields,
    },
}) => {
    const handleSubmit = (e) => {
        e.preventDefault();
        validateFields((err, values) => {
            if (!err) {
                dispatch({type: 'login/loginFun', payload: {
                    userName:values.userName,
                    validateCode:values.validateCode,
                    userPwd:MD5(values.password),
                    uuid:login.UUID,
                }});
            }
        });
    };

    const animation = {
        left: '2%',
        yoyo: false,
        repeatDelay:6000,
        onRepeat:()=>{
            dispatch({type:'login/inputAndOut',payload:{thunder:true}});
        },
        onComplete:()=>{
            dispatch({type:'login/inputAndOut',payload:{thunder:false}});
        },
        repeat: -1,
        // duration: 10000,
    };//底部文字动画
    const animationBack = {...animation,type:"from"};
    return (
        <div className={styles.loginBG}>
            <div className={styles.loginform}>
                <Form onSubmit={handleSubmit}>
                    <h2 style={{width: 220, textAlign: 'center'}}>{name}</h2>
                    <FormItem hasFeedback>
                        {getFieldDecorator('userName', {
                            rules: [{required: true, message: '请输入用户名!'}],
                        })(<Input
                            onPressEnter={handleSubmit}
                            prefix={<Icon type="user" style={{color: 'rgba(0,0,0,.25)'}}/>}
                            placeholder="用户名"
                        />)}
                    </FormItem>
                    <FormItem hasFeedback>
                        {getFieldDecorator('password', {
                            rules: [{required: true, message: '请输入密码!'}],
                        })(<Input
                            onPressEnter={handleSubmit}
                            prefix={<Icon type="lock" style={{color: 'rgba(0,0,0,.25)'}}/>}
                            type="password"
                            placeholder="密码"
                        />)}
                    </FormItem>
                    <FormItem>
                        <div style={{display:'flex',justifyContent:'space-between'}}>
                            {getFieldDecorator('validateCode', {
                                rules: [{required: true, message: '请输入验证码!'}],
                            })(
                                <Input style={{width:100}}
                                    onPressEnter={handleSubmit}
                                    prefix={<Icon type="lock" style={{color: 'rgba(0,0,0,.25)'}}/>}
                                    placeholder="验证码"
                                />)}
                            <img style={{width:80,height:40}}
                                onClick={()=>{
                                    dispatch({type:"login/getcode"});
                                }}
                                src={login.imgcode} alt=""/>
                        </div>
                    </FormItem>
                    <FormItem>
                        {getFieldDecorator('remember', {
                            valuePropName: 'checked',
                            initialValue: true,
                        })(<Checkbox>记住用户名</Checkbox>)}
                        <a style={{float: 'right'}} href="">忘记密码</a>
                        <Button type="primary" htmlType="submit" style={{width: '100%'}}>
                            登录
                        </Button>
                    </FormItem>
                </Form>
            </div>
            <TweenOne
                animation={animation}
                paused={false}
                style={{
                    fontSize: 20,
                    left: '96%',
                    top: "10%",
                    color: "#FFFFFF",
                    textShadow: "5px 2px 6px #000",
                    zIndex: 9999,
                    position: "absolute",
                }}
                className="code-box-shape"
            >
                {
                    login.thunder? <span style={{color:'#000'}}>--</span>:''
                }
            </TweenOne>
            <TweenOne
                animation={animationBack}
                paused={false}
                style={{
                    fontSize: 20,
                    left: '96%',
                    top: "90%",
                    color: "#FFFFFF",
                    textShadow: "5px 2px 6px #000",
                    zIndex: 9999,
                    position: "absolute",
                }}
                className="code-box-shape"
            >
                {
                    login.thunder? <span style={{color:'#000'}}>--</span>:''
                }
            </TweenOne>
        </div>
    );
};


LoginPage.propTypes = {
    form: PropTypes.object,
    dispatch: PropTypes.func,
    login: PropTypes.object,
};


export default connect(({login}) => ({login}))(Form.create()(LoginPage));
